<template>
  <section
    class="bg-gray-100 rounded-t-lg p-4 transition-all duration-300 z-10 flex-1 flex overflow-hidden"
  >
    <van-tabs
      v-model:active="activeTab"
      class="bg-gray-100 rounded-t-lg flex-1 flex flex-col"
    >
      <van-tab
        title="直播互动"
        name="interaction"
        class="h-full"
        v-if="liveDataStore.roomData?.openInteraction === 1"
      >
        <Chat />
      </van-tab>
      <van-tab
        :title="questionTabTitle"
        name="question"
        class="h-full"
        v-if="liveDataStore.roomData?.question.openQuestion === 1"
      >
        <div
          v-if="
            liveDataStore.roomWatchData.isAnswer === 0 &&
            !questionStore.isVisible &&
            liveDataStore.roomWatchData.answerState !== 3
          "
          class="text-center text-gray-500 text-sm mt-4"
        >
          答题未开始
        </div>
        <div
          v-if="
            !questionStore.isVisible &&
            liveDataStore.roomWatchData.answerState == 3
          "
          class="text-center text-gray-500 text-sm mt-4"
        >
          答题时间已过
        </div>
        <div
          v-if="
            liveDataStore.roomWatchData.isAnswer === 1 &&
            !questionStore.isVisible
          "
          class="text-center text-gray-500 text-sm mt-4"
        >
          答题已结束
        </div>
        <Question
          :isVisible="questionStore.isVisible"
          :questions="liveDataStore.roomData.question.questions"
          :answerTimeLimit="liveDataStore.roomData.question.answerTimeLimit"
          :answerNum="liveDataStore.roomData.question.answerNum"
          :answerCount="liveDataStore.roomWatchData?.answerCount || 0"
          @complete="questionStore.handleAnswer(liveDataStore, true)"
          @fail="questionStore.handleAnswer(liveDataStore, false)"
          @timeout="questionStore.handleTimeout(liveDataStore)"
          @close="questionStore.setIsVisible(false)"
        />
      </van-tab>
    </van-tabs>
  </section>
</template>

<script setup lang="ts">
import { ref, watch, computed } from "vue";
import Chat from "./Chat.vue";
import Question from "./Question.vue";
import useLiveDataStore from "../stores/LiveDataStore";
import { useQuestionStore } from "../stores/QuestionStore";
import { usePlayerStore } from "@/store/usePlayer";

const activeTab = ref("interaction");
const liveDataStore = useLiveDataStore();
const questionStore = useQuestionStore();
const playerStore = usePlayerStore();

// 计算答题标签的标题
const questionTabTitle = computed(() => {
  return questionStore.isVisible ? "答题中" : "题目";
});

questionStore.initWatcher(liveDataStore, playerStore);

watch(
  () => questionStore.isVisible,
  newVal => {
    if (newVal) {
      activeTab.value = "question";
    } else {
      activeTab.value = "interaction";
    }
  }
);
</script>

<style scoped lang="less">
:deep(.van-tabs__wrap) {
  flex-shrink: 0;
}
:deep(.van-tabs__content) {
  flex-grow: 1;
  // overflow: hidden;
  overflow-y: auto;
  margin-bottom: 3rem;
}
</style>
